<!--
All rights Reserved, Designed By www.youyacao.com
@Description:后台登陆页
@author:成都市一颗优雅草科技有限公司
@version 松鼠聚合直播系统v2.0
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584

 -->



<template>
    <div class="login-box">
         <div class="login-title">优雅草松鼠聚合直播</div>
        <div class="login-title">优雅·管理后台·优雅</div>
        <div class="login-input">
            <van-field
                    v-model="username"
                    clearable
                    placeholder="请输入登陆账号"
                    left-icon="manager"
            />

            <van-field
                    v-model="password"
                    type="password"
                    clearable
                    placeholder="请输入密码"
                    left-icon="lock"
            />
            <van-row>
                <van-col span="12"><van-field
                        v-model="yzcode"
                        clearable
                        left-icon="youzan-shield"
                        placeholder="请输入验证码"
                /></van-col>
                <van-col span="12"><img :src="imageUrl" width="150" height="50" @click="refreshImage()" /></van-col>
            </van-row>

        </div>
        <div class="button-box">
            <van-button type="warning" style="height: 40px;line-height: 40px; margin-bottom: 20px;" size="large" @click="onSubmitLogin" :disabled="disabled" :loading="disabled" loading-text="登陆中...">登 陆</van-button>
            <van-button type="default" style="height: 40px;line-height: 40px;" size="large" to="/register">注 册</van-button>

        </div>

             <div>成都市一颗优雅草科技有限公司-松鼠聚合</div>
    </div>
</template>

<script>
    import global_ from '../Global';
    import { Notify } from 'vant';
    export default {
        name: "login",
        props:["userinfo"],
        data(){
            return {
                username:'',
                password:'',
                yzcode:'',
                disabled:false,
                imageBaseUrl: global_.serverUrl+'index/index/vcode',
                imageUrl:global_.serverUrl+'index/index/vcode'
            }
        },
        created:function(){
            window.loginInfo = null;
            this.$axios.get(global_.serverUrl+"admin/visitor/logout");
        },
        methods:{
            onSubmitLogin:function () {
                var that = this;
                this.disabled = true;
                this.$axios.post(global_.serverUrl+'admin/visitor/login',{
                    username:this.username,
                    password:this.password,
                    yzcode:this.yzcode
                }).then(function (response) {
                    if(response.code != 1){
                        Notify(response.msg);
                    }else{
                        window.loginInfo = response.data;
                        that.$emit('userinfoUpdate',response.data);
                        that.$router.replace({path:'/'});
                        return;
                    }
                    that.disabled = false;
                    that.password = '';
                    that.yzcode = '';
                    that.refreshImage();
                }).catch(function (error) {
                    that.disabled = false;
                    that.password = '';
                    that.yzcode = '';
                    that.refreshImage();
                });
            },
            refreshImage:function () {
                this.imageUrl = this.imageBaseUrl + '?'+(new Date()).getTime();
            }
        }
    }
</script>

<style scoped>
.login-box{
    width: 300px;
    margin: 100px auto;
    background:#ffffff;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #cccccc;
    height: 400px;
}
    .login-title{
        font-weight: bold;
        font-size: 20px;
        text-align: center;
        padding-bottom: 20px;
    }
    .login-input .van-cell{
        margin: 10px 0px;
    }
</style>
